<template>
	<view class="messageCenter" :class="{ pd: !isDetele }">
		<topTitle :title="$t('messageCenter.title')">
			<template #right>
				<image v-if="isDetele && messageArr?.length" @click="isDetele = false" src="@/static/image/61.png"
					mode="widthFix" />
			</template>
		</topTitle>
		<view class="list" v-if="messageArr?.length">
			<view v-for="(item, idx) in messageArr" :key="idx"
				@click="!isDetele ? item.selected = !item.selected : goTo('/pages/index/messageCenterDetail?Id=' + item.Id)">
				<view>{{ item.title }}</view>
				<view class="ovsOne"></view>
				<view>{{ formattingTime(item.add_time) }}</view>
				<i v-if="!isDetele" :class="{ selected: item.selected }"></i>
				<up-badge absolute :offset="[0, 0]" :isDot="!item.read_state"></up-badge>
			</view>
		</view>
		<noData v-else />


		<view class="fot" v-if="!isDetele">
			<view @click="isDetele = true">{{ $t('messageCenter.cancel') }}</view>
			<view @click="UsersMailDeleteFn">{{ $t('messageCenter.delete') }}</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, getCurrentInstance } from "vue";
	const instance = getCurrentInstance()?.appContext.config.globalProperties;
	import { UsersMail, UsersMailDelete } from "@/api/UserApi";
	import { onShow, onReachBottom } from "@dcloudio/uni-app";

	let isDetele = ref<boolean>(true);
	let messageArr = ref<Array<any>>([]);
	let select_time : any = null;

	const initFn = async () => {
		let list = await UsersMail({ select_time });
		if (!select_time) {
			messageArr.value = list;
		} else {
			messageArr.value = [...messageArr.value, ...list];
		}
	};

	const UsersMailDeleteFn = async () => {
		let id : any = [];
		messageArr.value.forEach((item) => {
			if (item.selected) {
				id.push(item.Id);
			}
		});
		if (!id.length) {
			uni.showToast({ title: instance?.$t('messageCenter.deleteMessage'), icon: "none" });
			return;
		}
		await UsersMailDelete({ id });
		select_time = null;
		isDetele.value = true;
		initFn();
	};

	onShow(() => {
		initFn();
	});

	onReachBottom(() => {
		select_time = messageArr.value[messageArr.value.length - 1].add_time;
		initFn();
	});
</script>

<style scoped lang="scss">
	@import "@/static/scss/messageCenter.scss";
</style>